* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

html, body, #root {
  width: 100%;
  height: 100%;
  font-size: 13.666666vw;
}

html .app, body .app, #root .app {
  width: 100%;
  height: 100%;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

html .app .header, body .app .header, #root .app .header {
  color: #cccccc;
  width: 100%;
  height: .9rem;
  display: flex;
  background-color: #d44439;
}

html .app .header .left, body .app .header .left, #root .app .header .left {
  color: #cccccc;
  width: 15%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html .app .header .comment, body .app .header .comment, #root .app .header .comment {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cccccc;
}

html .app .header .right, body .app .header .right, #root .app .header .right {
  color: #cccccc;
  width: 15%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html .app .nav, body .app .nav, #root .app .nav {
  color: #cccccc;
  width: 100%;
  height: .9rem;
  background-color: #d44439;
  display: flex;
}

html .app .nav a, body .app .nav a, #root .app .nav a {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #cccccc;
}

html .app .nav .active, body .app .nav .active, #root .app .nav .active {
  border-bottom: 5px solid #cccccc;
}

html .app .main, body .app .main, #root .app .main {
  flex: 1;
  overflow: auto;
}

html .serch, body .serch, #root .serch {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0%;
  transform-origin: right bottom;
}

html .serch .transform-translateX, body .serch .transform-translateX, #root .serch .transform-translateX {
  transform: translateX(100%);
}

html .serch .serch-header, body .serch .serch-header, #root .serch .serch-header {
  display: none;
  display: flex;
  width: 100%;
  height: .9rem;
  background-color: #d44439;
}

html .serch .serch-header h1, body .serch .serch-header h1, #root .serch .serch-header h1 {
  width: 90%;
  height: 100%;
  font-size: 16px;
  display: flex;
  color: white;
  margin: 0;
  align-items: center;
}

html .serch .serch-header .back, body .serch .serch-header .back, #root .serch .serch-header .back {
  width: 10%;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html .serch .serch-header .back i, body .serch .serch-header .back i, #root .serch .serch-header .back i {
  font-size: 16px;
  color: white;
}

html .aaa, body .aaa, #root .aaa {
  display: none;
}
